<%
function containsTag(tagList, tag) {
    if (tagList == null || tagList == undefined) return 0;
    if (tag == undefined || tag == null) return 0;
    tag = tag.toLowerCase();
    for (var i = 0, len = tagList.length; i < len; i++) {
        if (tagList[i].toLowerCase() == tag) return 1;
    }
    return 0;
}

var s_html_href = '/'+env.locale+'/docs/Web/HTML';
var s_html_ref_href = '/'+env.locale+'/docs/Web/HTML/Element';
var s_html_ref_title = 'HTML Elements';
switch (env.locale) {
    case 'fr':
        s_html_href = '/'+env.locale+'/docs/HTML';
        s_html_ref_href = '/'+env.locale+'/docs/Web/HTML/Element';
        s_html_ref_title = 'Éléments HTML';
        break;
    case 'ru':
        s_html_ref_title = 'HTML элементы';
        break;
    default: break;
}

var text = mdn.localStringMap({
    'en-US': {
        'Input_types': '<code>&lt;input&gt;</code> types'
    }
});

// Find the section of HTML this page belongs to (that is the first tag of the form "HTML XYZ")
var tags = env.tags;
var found_tag = '';
for (i in tags) {
    if (tags[i] != s_html_ref_title) {
        if (('' + tags[i]).substr(0, 5) == 'HTML ') {
            found_tag = tags[i];
            break;
        }
    }
}

// Find the HTML Tags belonging to the same subject

if (found_tag != undefined && found_tag != null && found_tag.length) {
    // Find the pages, sub-pages of HTML/Element that are tagged with that specific tag
    var pageList = await page.subpagesExpand(s_html_ref_href);   // Get subpages, including tags
    var resultHTML = [];

    for (aPage in pageList) {
        if (containsTag(pageList[aPage].tags, found_tag)) {
            resultHTML.push(pageList[aPage].slug.split("/").pop(-1).toLowerCase());
        }
    }
}

function wrapHTMLElement(name) {
    return template("HTMLElement", [name, "", "", "HTMLRef"]);
}

var resultGuide = [];
var resultAPI = [];

 if (s_html_href) {  %>
  <section id="Quick_links">
  <ol>
   <% if (found_tag) {
        for( aPage in resultGuide) { // Tutorials and guides matching
  %>
            <li><a href="<%-resultGuide[aPage].url%>"><%-resultGuide[aPage].title%></a></li>
  <%    }
        for (slugLeaf in resultHTML) { // HTML entities matching
            if (resultHTML[slugLeaf] === "heading_elements") { // Special case for <h1>…<h6>
  %>
            <li><%- await template("HTMLelement", ["Heading_elements", "<code>&lt;h1&gt;-&lt;h6&gt;</code>"]) %></li>
  <%
            }
            else {
  %>
            <li><%- await template("HTMLelement", [resultHTML[slugLeaf]]) %></li>
  <%        }
        }
        for (slugLeaf in resultAPI) { // HTML-DOM interfaces matching
  %>
            <li><%- await template("domxref", [resultAPI[slugLeaf]]) %></li>
  <%    }
    } %>
    <% if (env.slug.includes("/HTML/Element/input")) { %>
   <li><details open><summary><%-text['Input_types']%></summary>
    <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/HTML/Element/input'])%></details></li>
    <% } %>
   <li><details><summary><%-s_html_ref_title%></summary><ol>
   <li class="no-bullet"><span class="no-link">A</span>
 <ol>
  <li><%-await wrapHTMLElement("a")%></li>
  <li><%-await wrapHTMLElement("abbr")%></li>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("acronym")%></s></li>
  <li><%-await wrapHTMLElement("address")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("applet")%></s></li>
  <li><%-await wrapHTMLElement("area")%></li>
  <li class="html5"><%-await wrapHTMLElement("article")%></li>
  <li class="html5"><%-await wrapHTMLElement("aside")%></li>
  <li class="html5"><%-await wrapHTMLElement("audio")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">B</span>
 <ol>
  <li><%-await wrapHTMLElement("b")%></li>
  <li><%-await wrapHTMLElement("base")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("basefont")%></s></li>
  <li class="html5"><%-await wrapHTMLElement("bdi")%></li>
  <li><%-await wrapHTMLElement("bdo")%></li>
  <li><s class="nonStdElement"><%-await wrapHTMLElement("bgsound")%></s></li>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("big")%></s></li>
  <li><s class="nonStdElement"><%-await wrapHTMLElement("blink")%></s></li>
  <li><%-await wrapHTMLElement("blockquote")%></li>
  <li><%-await wrapHTMLElement("body")%></li>
  <li><%-await wrapHTMLElement("br")%></li>
  <li><%-await wrapHTMLElement("button")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">C</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("canvas")%></li>
  <li><%-await wrapHTMLElement("caption")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("center")%></s></li>
  <li><%-await wrapHTMLElement("cite")%></li>
  <li><%-await wrapHTMLElement("code")%></li>
  <li><%-await wrapHTMLElement("col")%></li>
  <li><%-await wrapHTMLElement("colgroup")%></li>
  <li class="webcomp"><%-await wrapHTMLElement("content")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">D</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("data")%></li>
  <li class="html5"><%-await wrapHTMLElement("datalist")%></li>
  <li><%-await wrapHTMLElement("dd")%></li>
  <li><%-await wrapHTMLElement("del")%></li>
  <li class="html5"><%-await wrapHTMLElement("details")%></li>
  <li><%-await wrapHTMLElement("dfn")%></li>
  <li class="html5"><%-await wrapHTMLElement("dialog")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("dir")%></s></li>
  <li><%-await wrapHTMLElement("div")%></li>
  <li><%-await wrapHTMLElement("dl")%></li>
  <li><%-await wrapHTMLElement("dt")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">E</span>
 <ol>
  <li><%-await wrapHTMLElement("em")%></li>
  <li class="html5"><%-await wrapHTMLElement("embed")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">F</span>
 <ol>
  <li><%-await wrapHTMLElement("fieldset")%></li>
  <li class="html5"><%-await wrapHTMLElement("figcaption")%></li>
  <li class="html5"><%-await wrapHTMLElement("figure")%></li>
  <li><s class="deprecatedElement obsoleteElement"><%-await wrapHTMLElement("font")%></s></li>
  <li class="html5"><%-await wrapHTMLElement("footer")%></li>
  <li><%-await wrapHTMLElement("form")%></li>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("frame")%></s></li>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("frameset")%></s></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">G H</span>
 <ol>
  <li><%-await wrapHTMLElement("Heading_elements")%></li>
  <li><%-await wrapHTMLElement("head")%></li>
  <li class="html5"><%-await wrapHTMLElement("header")%></li>
  <li class="html5"><s class="deprecatedElement obsoleteElement"><%-await wrapHTMLElement("hgroup")%></s></li>
  <li><%-await wrapHTMLElement("hr")%></li>
  <li><%-await wrapHTMLElement("html")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">I</span>
 <ol>
  <li><%-await wrapHTMLElement("i")%></li>
  <li><%-await wrapHTMLElement("iframe")%></li>
  <li><%-await wrapHTMLElement("img")%></li>
  <li><%-await wrapHTMLElement("input")%></li>
  <li><%-await wrapHTMLElement("ins")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("isindex")%></s></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">J K</span>
 <ol>
  <li><%-await wrapHTMLElement("kbd")%></li>
  <li class="html5"><%-await wrapHTMLElement("keygen")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">L</span>
 <ol>
  <li><%-await wrapHTMLElement("label")%></li>
  <li><%-await wrapHTMLElement("legend")%></li>
  <li><%-await wrapHTMLElement("li")%></li>
  <li><%-await wrapHTMLElement("link")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("listing")%></s></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">M</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("main")%></li>
  <li><%-await wrapHTMLElement("map")%></li>
  <li class="html5"><%-await wrapHTMLElement("mark")%></li>
  <li><s class="nonStdElement"><%-await wrapHTMLElement("marquee")%></s></li>
  <li class="html5"><%-await wrapHTMLElement("menu")%></li>
  <li class="html5"><%-await wrapHTMLElement("menuitem")%></li>
  <li><%-await wrapHTMLElement("meta")%></li>
  <li class="html5"><%-await wrapHTMLElement("meter")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">N</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("nav")%></li>
  <li><s class="nonStdElement"><%-await wrapHTMLElement("nobr")%></s></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("noframes")%></s></li>
  <li><%-await wrapHTMLElement("noscript")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">O</span>
 <ol>
  <li><%-await wrapHTMLElement("object")%></li>
  <li><%-await wrapHTMLElement("ol")%></li>
  <li><%-await wrapHTMLElement("optgroup")%></li>
  <li><%-await wrapHTMLElement("option")%></li>
  <li class="html5"><%-await wrapHTMLElement("output")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">P</span>
 <ol>
  <li><%-await wrapHTMLElement("p")%></li>
  <li><%-await wrapHTMLElement("param")%></li>
  <li class="html5"><%-await wrapHTMLElement("picture")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("plaintext")%></s></li>
  <li><%-await wrapHTMLElement("pre")%></li>
  <li class="html5"><%-await wrapHTMLElement("progress")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">Q</span>
 <ol>
  <li><%-await wrapHTMLElement("q")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">R</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("rp")%></li>
  <li class="html5"><%-await wrapHTMLElement("rt")%></li>
  <li class="html5"><%-await wrapHTMLElement("rtc")%></li>
  <li class="html5"><%-await wrapHTMLElement("ruby")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">S</span>
 <ol>
  <li><%-await wrapHTMLElement("s")%></li>
  <li><%-await wrapHTMLElement("samp")%></li>
  <li><%-await wrapHTMLElement("script")%></li>
  <li class="html5"><%-await wrapHTMLElement("section")%></li>
  <li><%-await wrapHTMLElement("select")%></li>
  <li class="webcomp"><%-await wrapHTMLElement("shadow")%></li>
  <li class="html5"><%-await wrapHTMLElement("slot")%></li>
  <li><%-await wrapHTMLElement("small")%></li>
  <li class="html5"><%-await wrapHTMLElement("source")%></li>
  <li><s class="nonStdElement"><%-await wrapHTMLElement("spacer")%></s></li>
  <li><%-await wrapHTMLElement("span")%></li>
  <li><s class="obsoleteElement deprecatedElement"><%-await wrapHTMLElement("strike")%></s></li>
  <li><%-await wrapHTMLElement("strong")%></li>
  <li><%-await wrapHTMLElement("style")%></li>
  <li><%-await wrapHTMLElement("sub")%></li>
  <li class="html5"><%-await wrapHTMLElement("summary")%></li>
  <li><%-await wrapHTMLElement("sup")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">T</span>
 <ol>
  <li><%-await wrapHTMLElement("table")%></li>
  <li><%-await wrapHTMLElement("tbody")%></li>
  <li><%-await wrapHTMLElement("td")%></li>
  <li class="webcomp"><%-await wrapHTMLElement("template")%></li>
  <li><%-await wrapHTMLElement("textarea")%></li>
  <li><%-await wrapHTMLElement("tfoot")%></li>
  <li><%-await wrapHTMLElement("th")%></li>
  <li><%-await wrapHTMLElement("thead")%></li>
  <li class="html5"><%-await wrapHTMLElement("time")%></li>
  <li><%-await wrapHTMLElement("title")%></li>
  <li><%-await wrapHTMLElement("tr")%></li>
  <li class="html5"><%-await wrapHTMLElement("track")%></li>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("tt")%></s></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">U</span>
 <ol>
  <li><%-await wrapHTMLElement("u")%></li>
  <li><%-await wrapHTMLElement("ul")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">V</span>
 <ol>
  <li><%-await wrapHTMLElement("var")%></li>
  <li class="html5"><%-await wrapHTMLElement("video")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">W</span>
 <ol>
  <li class="html5"><%-await wrapHTMLElement("wbr")%></li>
 </ol>
 </li><li class="no-bullet"><span class="no-link">X Y Z</span>
 <ol>
  <li><s class="obsoleteElement"><%-await wrapHTMLElement("xmp")%></s></li>
 </ol>
    </li>
   </ol>
   </details></li>
   </ol>
  </section>
<%}%>
